<template>
	<view class="waterfall">
		<Navbar :leftClick="toHome" :showLeft="true" title="科目练习"></Navbar>
		<uv-sticky bgColor="#fff" class="mid">
			<uv-tabs :active-style="activeStyle" :list="tabs" key-name="bankName" @click="click"
				:inactiveStyle="inactiveStyle" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				lineWidth="30">
			</uv-tabs>
		</uv-sticky>
		<WaterFall :parent-id="parentId"></WaterFall> 
	</view>
</template>

<script setup>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		ref,
		computed,
		onMounted,
		toRaw,
		getCurrentInstance
	} from 'vue'
	import WaterFall from './WaterFall.vue'
	const {
		proxy
	} = getCurrentInstance();
	const tabs = ref([])
	const parentId = ref();
	const activeStyle = {
		color: '#303133',
		fontWeight: 'bold',
		transform: 'scale(1.05)'
	}
	const inactiveStyle = {
		color: '#606266',
		transform: 'scale(1)'
	}
	const click = (item) => {
		parentId.value = item.bankId
	}
	const toHome = () => {
		uni.switchTab({
			url: '../Index'
		})
	}
	const loadTab = async () => {
		let result = await proxy.Request({
			url: proxy.Api.loadTabs,
			showLoading: false,
		});
		if (!result) {
			return;
		}
		tabs.value = result.data;
	};
	onMounted(() => {
		console.log("mounted钩子函数启动")
		loadTab()
	})
</script>
<style>
	page {
		background: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}
</style>